// 路由跳转
import { withRouter } from 'react-router-dom';
import React, {Component} from 'react';
import './Header.css';
import { Menu, MessageBox, Message } from 'element-react';;

class Header extends Component{
    constructor (props) {
        super(props)
        this.state = {
            menus: [{
                index: '0',
                pathname: '/list'
            }, {
                index: '1',
                pathname: '/chatRoom'
            }, {
                index: '2',
                pathname: '/message'
            }, {
                index: '3',
                pathname: '/nameCard'
            }, {
                index: '4',
                pathname: '/daily'
            }],
          index: '0'
        }
    }
    componentWillMount () {
        this.state.menus.forEach((item) => {
            if (item.pathname === this.props.history.location.pathname) {
                this.setState({ index: item.index})
            }
        })
    }
    // 退出
    exit (e) {
        MessageBox.confirm('是否离开接口中心?', '提示', {
            type: 'warning'
        }).then(() => {
            window.location.pathname = '/';
            Message({
                type: 'success',
                message: '已退出接口中心!'
            });
        }).catch(() => {

        });
    }
    // 目录选择
    onSelect (e) {
        this.state.menus.forEach((item) => {
            if (item.index === e) {
                this.setState({ index: e})
                this.props.history.push(item.pathname)
            }
        })
    }

    render () {
        return (
            <div className="header">
                <div className="header_logo">
                    <span>接口中心</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
                <div className="header-right">
                    <Menu theme="dark" defaultActive={this.state.index} className="el-menu-demo" mode="horizontal" onSelect={this.onSelect.bind(this)}>
                        <Menu.Item index="0">接口列表</Menu.Item>
                        <Menu.Item index="1">练习</Menu.Item>
                        <Menu.Item index="2">留言信息</Menu.Item>
                        <Menu.Item index="3">我的信息</Menu.Item>
                        <Menu.Item index="4">我的日报</Menu.Item>
                    </Menu>
                    <span onClick={this.exit.bind(this)}>退出</span>
                </div>
            </div>
        )
    }
}

export default withRouter(Header)
